<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
    padding: 0;
    margin: 0;
}
div{
    width : 100px;
    height : 100px;
    background-color : pink;
    border-radius: 50%;
    position: absolute;
    
    cursor: pointer;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var div = document.getElementById("box");
var path = [];
div.onmousedown = function (e){
    var x = e.offsetX;
    var y = e.offsetY;
    document.onmousemove = function (event){
        var left = event.clientX - x;
        var top = event.clientY - y;
        div.style.left = left + "px";
        div.style.top = top + "px";
        path.push([left, top]);
    }
}
div.onmouseup = function (){
    document.onmousemove = null;
    setTimeout(function step (){
        var last = path.pop();
        div.style.left = last[0] + "px";
        div.style.top = last[1] + "px";
        if(path.length == 0) return;
        setTimeout(step, 20)
    }, 40)
}
</script>
</body>
</html>

<!--
2. 只要当按下鼠标键的时候才会跟随鼠标运动的小球.
        当松开鼠标的时候该小球并能按照原路返回.

-->